<template>
	<scroll-view scroll-y="true" class="page">
		<u-navbar :placeholder="true" title="编辑红包" @leftClick="$utils.back()" border>

		</u-navbar>
		<view>
			<view style="align-items: center;" class="mt20 borderBottom  flex pb20 pt20">
				<view class="mr20 ">
					祝福人：
				</view>
				<view style="flex: 1;display: flex;justify-content: flex-end;">
					<image v-if="user.avatar" :src="user.avatar"
						style="width: 100rpx;height: 100rpx;border-radius: 8rpx;" />
					<text v-else>请选择祝福人</text>
				</view>
			</view>
			<view style="align-items: center;" class="mt20 borderBottom  flex pb20 pt20">
				<view class="mr20 ">
					红包个数(每天一个)：
				</view>
				<view style="flex: 1;" @click="partsShow=true">
					<u--input inputAlign='right' placeholder="请输入红包个数" border="none" v-model="parts" type='number'
						disabled disabledColor='#fff'></u--input>
				</view>
			</view>
			<view style="align-items: center;" class="mt20 borderBottom  flex pb20 pt20">
				<view class="mr20 ">
					最低步数：
				</view>
				<view style="flex: 1;">
					<u--input inputAlign='right' placeholder="请输入最低步数" border="none" v-model="step"
						type='number'></u--input>
				</view>
			</view>
			<view style="align-items: center;" class="mt20 borderBottom  flex pb20 pt20">
				<view class="mr20 ">
					红包语：
				</view>
				<view style="flex: 1;">
					<u--input inputAlign='right' placeholder="请输入红包语" border="none" v-model="blessing_words"></u--input>
				</view>
			</view>
			<view style="align-items: center;" class="mt20 borderBottom  flex pb20 pt20">
				<view class="mr20 ">
					金额：
				</view>
				<view style="flex: 1;justify-content:flex-end;align-items: center;display: flex;"
					@click="totalShow=true">
					<u--input inputAlign='right' placeholder="请输入金额" border="none" v-model="total" type='number'
						disabled disabledColor='#fff'></u--input>
				</view>
			</view>
			<view style="text-align: right;margin-top: 20rpx;">
				账户余额：￥{{ userInfo.account}} 红包余额：￥{{ accountTotal}} <text class="allbutton" @click="jump">去充值</text>
			</view>
			
			<view class="mt20 info">
				<view class="mb10">
					1:充值余额，用来送祝福红包。
				</view>
				<view class="mb10">
					2:邀请亲友成为自己的亲友。
				</view>
				<view class="mb10">
					3:送亲友红包，设立跑步步数达标，
				</view>
				<view class="mb10">
					4:亲友达到步数，收到红包奖励。
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-button :disabled="disabled" @click="pulish">保存</u-button>
		</view>
		<root-portal>
			<selectRelative :show='show' @select='select' @close='show=false' />
			<u-modal closeOnClickOverlay :show="partsShow" title="选择红包个数" @close='partsShow=false'
				@confirm='partsConfirm'>
				<view class="flex" style="justify-content: space-around;width: 100%;">
					<view v-for="item in partsList" :key="item" class="but" @click="parts=item"
						:class="{choose:item==parts}">
						{{item}}
					</view>
				</view>
			</u-modal>
			<u-modal closeOnClickOverlay :show="totalShow" title="选择红包金额" @close='totalShow=false'
				@confirm='totalConfirm'>
				<view class="flex" style="justify-content: space-around;width: 100%;">
					<view v-for="item in totalList" :key="item" class="but" @click="chooseTotal(item)"
						:class="{choose:item==total,but2:item>accountTotal}">
						{{item}}
					</view>
				</view>
			</u-modal>
		</root-portal>
	</scroll-view>
</template>

<script>
	import selectRelative from "./components/selectRelative.vue";
	export default {
		components: {
			selectRelative
		},
		data() {
			return {
				accountTotal:0,
				totalList: ['10', '30', '50', '100', '200', '300'],
				totalShow: false,
				partsList: ['10', '15', '20', '25', '30'],
				partsShow: false,
				userInfo: uni.getStorageSync('user'),
				show: false,
				user: {

				},
				total: 0,
				blessing_words: '',
				parts: null,
				disabled: false,
				loading: true,
				step: null,
				op: {}
			}
		},
		onShareAppMessage() {
			return {
				title: '亲友邀请',
				path: "/invite/index?id=" + this.userInfo.id,
				imageUrl: this.userInfo.avatar
			}

		},
		onLoad(op) {
			this.op = op
			this.$api.Relative.Run.Detail(op.id).then(res => {
				const detail = res.data.redpacket
				this.total = detail.total
				this.accountTotal=~~this.total+~~this.userInfo.account
				this.parts = detail.parts
				this.step = detail.step
				this.user = {
					...detail.receiver,
					relative_id: detail.receiver_id
				}
				this.blessing_words = detail.blessing_words
			})

		},
		methods: {
			chooseTotal(item) {
				if (item > this.accountTotal) {
					uni.$u.toast('金额不能大于余额')
					return
				}
				this.total = item
			},
			totalConfirm() {
				if (!this.total) {
					uni.$u.toast('请选择金额')
					return
				}
				this.totalShow = false
			},
			partsConfirm() {
				if (!this.parts) {
					uni.$u.toast('请选择红包')
					return
				}
				this.partsShow = false
			},
			jump() {
				this.$utils.navigateTo({
					url: '/My/Recharge'
				})
			},
			select(e) {
				this.user = e
			},
			pulish() {
				if (!this.user.avatar) {
					uni.$u.toast('请选择红包人')
					return
				}



				if (!this.blessing_words) {
					uni.$u.toast('请输入红包语')
					return
				}
				if (!this.total) {
					uni.$u.toast('请输入金额')
					return
				}
				if (this.total == 0) {
					uni.$u.toast('金额不能为0')
					return
				}
				if (!this.parts) {
					uni.$u.toast('请输入红包个数')
					return
				}
				if (this.step == 0) {
					uni.$u.toast('最低步数不能为0')
					return
				}
				if (this.step < 0) {
					uni.$u.toast('最低步数不能小于0')
					return
				}
				if (!this.step) {
					uni.$u.toast('请输入最低步数')
					return
				}
				this.Add()

			},
			Add() {
				this.disabled = true
				let obj = {
					total: this.total,
					parts: this.parts,
					blessing_words: this.blessing_words,
					step: this.step,
					receiver_id: this.user.relative_id
				}
				this.$api.Relative.Run.Update(this.op.id, obj).then(res => {
					uni.$u.toast('更新成功')
					this.$api.My.Detail().then(my => {
						uni.setStorageSync('user', my.data);
						uni.reLaunch({
							url: '/My/blessing'
						})
					});
				}).catch(err => {
					this.disabled = false
					console.log(err)
					uni.$u.toast(err.data.message)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		border-radius: 8rpx;
		background: rgba(#aaffff, 0.2);
		padding: 10rpx;
	}
	.page {
		display: flex;
		height: calc(100vh - 90rpx - constant(safe-area-inset-bottom) + 10rpx);
		height: calc(100vh - 90rpx - env(safe-area-inset-bottom) + 10rpx);
		flex-direction: column;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.borderBottom {
		border-bottom: 1rpx solid #f1f1f1;
	}






	.flex {
		display: flex;
	}

	.pb20 {
		padding-bottom: 20rpx;
	}

	.pt20 {
		padding-top: 20rpx;
	}



	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx 0;

		view:nth-child(2) {
			flex: 0.98;
		}
	}

	.allbutton {
		border-radius: 100rpx;
		border: 1rpx solid #bbb;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.bottom {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		width: calc(100% - 40rpx);
	}

	.but {
		border-radius: 100rpx;
		/* background-color: #ddd; */
		padding: 0rpx 20rpx;
		margin: 20rpx 0rpx;
		border: 1rpx solid;
	}

	.choose {
		color: #fff;
		background-color: rgb(66, 83, 216);
	}

	.but2 {
		border: 1rpx solid #bbb;
		color: #bbb;
	}
</style>